<template>
  <div class="login">
    <img src="@/assets/img/tinallal.png" alt="" class="bg">
    <div class="formCon">
      <div class="logo"></div>
      <p class="form-tit">甜啦啦后台管理系统</p>
      <el-form ref="form" :model="form" :rules="ruleForm">
        <el-form-item prop="userName"> 
          <el-input placeholder="请输入用户名" v-model="form.userName" prefix-icon="el-icon-user" clearable></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" show-password v-model="form.password" prefix-icon="el-icon-key" clearable></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <div class="form-code" >
            <el-input class="form-code-input" v-model="form.code"></el-input>
            <el-image :src="'data:image/png;base64,'+imgCodeUrl" fit="fill" class="form-code-img" @click="ChangeImg"></el-image>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="form-checked">
            <el-checkbox v-model="form.checked">保持登录</el-checkbox>
          </div>
        </el-form-item>
        <el-form-item>
         <el-button type="primary" @click="submitForm">登录</el-button>
         <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
export default {
 name:'login',
 data() {
   return {
     form: {
        userName:'',
        password:'',
        code:'',
        checked:true
     },
     ruleForm: {
       userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
       password: [{required: true, message: '请输入密码', trigger: 'blur'}],
       code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
     },
     imgCodeUrl:''
   }
 },
 created() {
   this.ChangeImg()
 },
 methods: {
  /**
   切换验证码
    */
   ChangeImg() {
    this.$request({
     method: 'post',
     url: '/Users/LoginImgCode'
    }).then(res => {
      var res = res.data;
      this.imgCodeUrl =  res.Img;
      let token = "";
      if(res.SessionID != "") {
        this.token = res.SessionID;
      }else{
        token = res.SessionID;
      }
    })
   },
   submitForm() {
     this.$refs.form.validate((valid) => {
       if(valid) {
         console.log('success')
          let data = {
            type: "AdminLogin",
            username: this.form.userName,
            password: this.form.password,
            code: this.form.code
          }
          let proc = "Proc_Admin_MembersQuery";//存储过程名
          let type = "login";
           this.$requestSys({
            method:"post",
            url: "/admin/main/ashx/UserJson.ashx?type=" + type + "&json=" + encodeURIComponent(JSON.stringify(data)) + "&proc=" + proc,
            headers: {
              'Auth': this.token
            },
          }).then((res) => {
            console.log(res)
            if (res.flag == 0) {
              //成功后跳转
              this.$router.replace({
                path:"/home"
              })
              window.localStorage.setItem('Token', this.token)
              window.localStorage.setItem("userId",res.data[0].userId)
              window.localStorage.setItem("entId",res.data[0].entId)
              this.$message({
                message: '登录成功',
                type: 'success'
              });
            } else if(res.flag == 2){
              this.$message({
                message: res.message,
                type: 'error'
              });
              this.$router.push({
                path:"/login"
              })
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              });
            }
          }).catch((err) => {
            window.console.log(err)
          });
       }else {
         console.log('false')
       }
     })
   },
   resetForm() {
     this.$refs.form.resetFields();
   }
 }
}
</script>

<style scoped>
.login{
  width: 100%;
  height: 100%;
}

.bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.formCon{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -190px;
  margin-top: -135px;
  width:340px;
  height: 260px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.19);
}

.logo{
  position: absolute;
  top: -120px;
  left: 50%;
  margin-left: -50px;
  width: 100px;
  height: 100px;
  background: url("~@/assets/img/logo.png") no-repeat center;
  background-size: 100% 100%;
}

.formCon::before{
  content: '';
  display: inline-block;
  position: absolute;
  border: 10px solid transparent;
  border-bottom-color: rgba(255, 255, 255, 0.19);
  left: 50%;
  top: -20px;
  margin-left: -10px;
  z-index: 99;
  width: 0;
  height: 0;
}

.form-tit{
  text-align: center;
  padding-bottom: 10px;
  font-size: 14px;
  color: #C0C4CC;
}

.el-input>>>.el-input__inner{
  background-color: rgba(255, 255, 255, 0.1);
}

.form-code{
  display: flex;
  align-items: center;
}
.form-code-input{
  width: 200px;
}
.form-code-img{
  width: 80px;
  height: 32px;
  margin-left: 20px;
  border-radius: 3px;
}

.form-checked{
  display: flex;
  justify-content: flex-start;
  padding-left: 3px;
  box-sizing: border-box;
}
</style>